/*css的过渡动画效果*/
.show {
    /*opacity: 1;*/
    /*!*css的过渡动画效果*!*/
    /*transition: all 1s ease-in;*/
    animation: show-item 2s ease-in forwards;
}
@keyframes show-item {
    /*表示一个元素由显示变为隐藏的时候*/
    0% {
        opacity: 0;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    /*动画执行完毕后，最后的这个动画的css效果不会被保存下来。*/
    100% {
        opacity: 1;
        color: blue;
    }
}
.hide {
    /*opacity: 0;*/
    /*transition: all 1s ease-in;*/
    /*forwards能让动画结束之后保存动画最后一帧的css的样式*/
    animation: hide-item 2s ease-in forwards;
}

/*通过keyframes实现css的动画*/
@keyframes hide-item {
    /*表示一个元素由显示变为隐藏的时候*/
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    /*动画执行完毕后，最后的这个动画的css效果不会被保存下来。*/
    100% {
        opacity: 0;
        color: blue;
    }
}